<template>
	<div class="business">
		<!--上边-->
	<div style="height:60px;">
		<div style="margin-top:40px;margin-left:40px;float:left">
			<el-form :inline="true" :model="filters"  ref="filters" :rules="rules" class="demo-form-inline">
				<el-form-item label="业务类型" prop="name">
					 <el-select v-model="filters.name" placeholder="请选择" >
						<el-option v-for="site in tableData" :value="site.name"></el-option>
					 </el-select>
				</el-form-item>
				<el-form-item label="发生时间" style="margin-left:0px" prop="date">
						<el-date-picker 
							v-model="filters.date"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
				<el-button type="primary" @click="onSubmit('filters')">检索</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
			<!--中间内容-->
		<el-table :data="tableData"    :row-class-name="tableRowClassName"  :header-cell-class-name="tableheaderClassName"   style="width:95%;margin-left:50px;margin-top:100px">
					 <el-table-column 
					prop="name"
					label="类型">
					</el-table-column>
					<el-table-column
					prop="mode"
					label="操作">
					</el-table-column>
					<el-table-column
					prop="user"
					label="操作人">
					</el-table-column>
					<el-table-column
					prop="time"
					sortable
					label="时间">
					</el-table-column>
		 </el-table>
		 <!--底部内容-->
		<div class="di">
			<div style="float:right;width:30%">
				<el-pagination
					background
					layout="prev, pager, next" 
					@current-change="handleCurrentChange" 
					:total="total" >
				</el-pagination>
			</div>
		</div>
		
</div>
</template>
<script>
import util from '../../common/js/date.js';
import { getUserListPage } from '../../api/fictitious.js';
export default {
	name:'log',
	data() {
		return {
			filters: {
				name:'',
				date:'',
			},
			page: 1,
			total: 0,
			biao:"业务日志",
			listLoading:false,
			rules:{
				type:[{required:true,message:'业务类型不能为空',trigger:'blur'}],
				date:[{required:true,message:'日期不能为空',trigger:'blur'}]
			},
			tableData: [],
			titles:[
				{
					prop: "name",
					label: "类型"
				}, {
					prop: "mode",
					label: "操作"
				},{
					prop: "user",
					label: "操作人"
				},{
					prop: "time",
					label: "时间"
				}],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			form: {
				name: '',
				rule: '',
				desc: '',
			},
			form1: {
				name: '',
				rule: '',
				desc: ''
			},
		};
	},
	methods:{
		//获取用户列表
		getUsers() {
			let para = {
				page: this.page,
				name: this.filters.name,
				data: this.filters.data,
				table:this.biao,
			};
			this.listLoading = true;
			getUserListPage(para).then((res) => {
				console.log(res.data);
				this.total = res.data.total;
				this.tableData = res.data.business_log;
				for(var i=0;i<res.data.business_log.length;i++){
					this.tableData[i].time = util(this.tableData[i].time)
				}
				this.listLoading = false;
			});
		},
		// 分页获取
		handleCurrentChange(val) {
			this.page = val;
			this.getUsers();
		},
		onSubmit(formName){
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.getUsers();
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		tableheaderClassName() {
			return "table-head-th";
		},
		tableRowClassName({ rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
	},
	mounted() {
		this.getUsers();
	}
};
</script>
<style scoped>
	.business .el-table .table-head-th{
		background-color:#f4f4f4;
		font-size: large;
	}
	.business{width:90%;margin:10px;}
	.business .di{width:80%;margin-left:0px;position:relative;left:6%;
	 bottom:-50%;line-height:36px;
	 margin-top: 30px;}
</style>
